<template>
  <div>
    <YlTab
      :tabList="tabList"
      @tab-click="handleTabClick"
    ></YlTab>
    <div class="yl-table-list">
      <el-table
        v-loading="loading"
        element-loading-text="玩命加载中"
        element-loading-spinner="el-icon-loading"
        element-loading-background="rgba(0, 0, 0, 0.8)"
        border
        stripe
        style="100%"
        :data="tableData"
      >
        <el-table-column  label="序号" width="60px" align="center" show-overflow-tooltip>
          <template slot-scope="scope">
            <span>{{ scope.$index + 1 }}</span>
          </template>
        </el-table-column>

        <el-table-column align="center"  label="日志" prop="name" show-overflow-tooltip></el-table-column>

        <el-table-column align="center"  label="年龄" prop="age" show-overflow-tooltip></el-table-column>

        <el-table-column align="center"  label="时间" prop="time" show-overflow-tooltip></el-table-column>
        <div class="yl-table-empty" slot="empty">
          <img src="~@/assets/icons/svg/no-data.svg">
          <div>暂无数据</div>
        </div>
      </el-table>
      <!-- 分页模块 -->
      <YlPage :size="10" :page="1" :total="100"></YlPage>
    </div>
  </div>
</template>

<script>
import YlTab from '@/components/YlTab'
export default {
  components: {
    YlTab
  },
  data () {
    return {
      loading: false,
      tabList: [
        {
          label: '系统日志',
          name: 'system'
        },
        {
          label: '使用日志',
          name: 'use'
        },
        {
          label: '未知日志',
          name: 'know'
        }
      ],
      chooseTab: '',
      tableData: [
        {
          id: 1,
          name: 'zero_fsc',
          age: 22,
          time: '2020-05-05 12:00:00'
        },
        {
          id: 2,
          name: 'zero_fsc',
          age: 22,
          time: '2020-05-05 12:00:00'
        }
      ]
    }
  },

  methods: {
    // 获取选择的键
    handleTabClick (val) {
      this.chooseTab = val
    }
  }
}
</script>
